<template>
  <div id="mapContainer">
    <div id="amap" ref="amap"></div>
  </div>
</template>

<script>
import Loading from '@/components/loading';
import { PINCHE, BAOCHE, OPT_TYPE_ZHANDIAN, OPT_TYPE_WEILAN, OPT_TYPE_BOTH } from './types';
import { mapGetters } from 'vuex';
const MARKER_MOVE_SPEED = 75;
export default {
  name: 'amap',
  data() {
    return {
      instance: null,
      polygon: null,
      selectedStationMarker: null,
      timerOrder: null,
      geolocation: null,
      polyline: null,
      currentRoutes: null,
      driveCar: null,
      drivePath: null,
      picker: null,
      driveCarInfo: {
        timeStr: '',
        mileStr: '',
        milePreStr: '距终点'
      },
      adsorptionFenceInfo: [],
      adsorptionFence: null,
      adsorptionMarkers: [],
      adsorptionPanFlag: false,
      adsorptionPoint: null,
      adsorptionStationId: undefined,
      driveCarText: null
    };
  },
  props: {
    center: {
      type: Array,
      default: () => {
        return [116.397428, 39.90923];
      }
    },
    mode: {
      // 地图类型：1:站点、2:围栏、3:共存
      type: String,
      default: '0'
    },
    zoom: {
      type: Number,
      default: 11
    },
    hasPicker: {
      type: Boolean,
      default: false
    },
    markers: {
      type: Array,
      default: () => {
        return [];
      }
    },
    fences: {
      type: Array,
      default: () => {
        return [];
      }
    },
    stations: {
      type: Array,
      default: () => {
        return [];
      }
    },
    centerMode: {
      // 地图中心店模式,1: 使用后台设定的中心店 2: 使用GPS定位的中心店
      type: String,
      default: '0'
    },
    noAutoZoom: {
      type: Boolean,
      default: false
    },
    isStart: {
      // 起点还是终点
      type: Boolean,
      default: false
    },
    type: {
      // 1:拼车、2:包车
      type: String,
      default: '1'
    }
  },
  mounted() {
    Loading.show();
    let c = this.center;
    let z = this.zoom;
    this.instance = new AMap.Map(this.$refs.amap, {
      zoom: z, // 级别
      center: c, // 中心点坐标
      mapStyle: 'amap://styles/b7bb350207a4d6e98610556cbaa8d41b'
    });
    this.instance.on('dragstart', evt => {
      this.$emit('dragstart');
    });
    this.instance.on('complete', evt => {
      console.log('地图加载完成');
      this.$emit('complete', this.instance);
      Loading.hide();
      if (this.mode === OPT_TYPE_ZHANDIAN) {
        console.log('地图显示模式为站点模式');
        this.initStations();
      } else if (this.mode === OPT_TYPE_WEILAN) {
        console.log('地图显示模式为围栏模式');
        this.initFences();
        this.checkCenter();
        this.initPositionPicker();
      } else if (this.mode === OPT_TYPE_BOTH) {
        console.log('地图显示模式为站点围栏共存模式');
        this.initStations();
        this.initFences();
        this.checkCenter();
        this.initPositionPicker();
      }
      this.initView();
      if (process.env.NODE_ENV === 'development') {
        AMap.plugin(['AMap.ToolBar'], () => {
          var toolbar = new AMap.ToolBar();
          this.instance.addControl(toolbar);
        });
      }
    });
  },
  methods: {
    checkCenter() {
      if (!this.center) {
        return;
      }
      if (!this.isContain(this.center)) {
        this.centerMode = '1';
        if (this.isStart) {
          if (this.type === PINCHE) {
            this.center = this.pinStartMapCenter;
          } else {
            this.center = this.baoStartMapCenter;
          }
        } else {
          if (this.type === PINCHE) {
            this.center = this.pinEndMapCenter;
          } else {
            this.center = this.baoEndMapCenter;
          }
        }
      }
    },
    initFences() {
      console.log('围栏信息：', this.fences);
      if (this.fences.length > 1) {
        this.polygon = new AMap.Polygon({
          // 绘制围栏
          map: this.instance,
          path: this.fences,
          strokeColor: '#FF6917',
          strokeOpacity: 1,
          strokeWeight: 4,
          fillColor: '#FF6917',
          fillOpacity: 0.1
        });
        this.instance.add(this.polygon);
      }
    },
    initStations() {
      console.log('站点信息：', this.stations);
      if (this.stations.length > 0) {
        this.stations.forEach((item, index) => {
          this.addStation(item);
        });
      }
    },
    initPositionPicker() {
      let map = this.instance;
      // 加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
      AMapUI.loadUI(['misc/PositionPicker'], PositionPicker => {
        this.picker = new PositionPicker({
          mode: 'dragMap', // 设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
          map: map, // 依赖地图对象
          iconStyle: {
            // 自定义外观
            url: require('@/assets/imgs/sc_datouzhen.png'), // 图片地址
            size: [25, 36], // 要显示的点大小，将缩放图片
            ancher: [12.5, 36] // 锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
          }
        });
        this.picker.on('success', positionResult => {
          let result = {
            coordinate: [],
            stationName: '',
            position: ''
          };
          result.coordinate = [positionResult.position.lng, positionResult.position.lat];
          if (positionResult.regeocode.pois.length > 0) {
            result.stationName = positionResult.regeocode.pois[0].name;
          } else {
            result.stationName = positionResult.regeocode.formattedAddress;
          }
          result.position = positionResult.address;
          if (this.selectedStationMarker) {
            this.selectedStationMarker.setText(
              '<div class="station-marker-normal">' + this.selectedStationMarker.getExtData().stationName + '</div>'
            );
          }
          if (!this.adsorptionPanFlag) {
            this.$emit('select', result);
          } else {
            result.adsorption = true;
            result.stationName = this.adsorptionPoint.shortName;
            result.position = this.adsorptionPoint.longName;
            result.routeStationId = this.adsorptionStationId;
            this.$emit('select', result);
            this.adsorptionPanFlag = false;
          }
        });
        this.picker.start();
      });
    },
    addStation(item) {
      let marker = new AMap.Text({
        bubble: false,
        text: '<div class="station-marker-normal">' + item.stationName + '</div>',
        position: item.coordinate,
        textAlign: 'center',
        verticalAlign: 'middle',
        style: {
          border: '0px',
          background: 'transparent',
          height: '35px'
        },
        extData: item,
        clickable: true,
        offset: new AMap.Pixel(0, -20)
      });
      marker.on('touchstart', evt => {
        if (this.selectedStationMarker) {
          this.selectedStationMarker.setText(
            '<div class="station-marker-normal">' + this.selectedStationMarker.getExtData().stationName + '</div>'
          );
        }
        this.selectedStationMarker = marker;
        this.selectedStationMarker.setText('<div class="station-marker-selected">' + item.stationName + '</div>');
        // this.instance.setCenter(item.coordinate)
        item.isStation = true;
        this.$emit('select', item);
        // evt.preventDefault();
      });
      this.instance.add(marker);
      item.marker = marker;
    },
    highLightStation(station) {
      Loading.show();
      setTimeout(() => {
        Loading.hide();
        if (this.stations && this.stations.length > 0) {
          if (this.selectedStationMarker) {
            this.selectedStationMarker.setText(
              '<div class="station-marker-normal">' + this.selectedStationMarker.getExtData().stationName + '</div>'
            );
          }
          if (station.marker) {
            this.selectedStationMarker = station.marker;
            this.selectedStationMarker.setText('<div class="station-marker-selected">' + station.stationName + '</div>');
          }
          this.$emit('select', station);
        }
      }, 500);
    },
    initView() {
      if (this.centerMode === '1') {
        console.log('后台设置的中心点：', this.center);
        this.instance.setFitView();
        if (this.center) {
          this.instance.setCenter(this.center);
        }
      } else if (this.centerMode === '2' && this.isStart) {
        console.log('使用用户定位点：', this.center);
        if (this.center) {
          this.instance.setCenter(this.center);
          this.instance.setZoom(15);
        } else {
          this.instance.setFitView();
        }
      } else {
        console.log('没有中心点模式配置');
        if (!this.noAutoZoom) {
          this.instance.setFitView();
        }
      }
    },
    setCenter(center) {
      // 参数应该为高德地图识别的中心点
      if (this.instance) {
        this.instance.setCenter(center);
      }
    },
    isContain(coordinate) {
      if (this.polygon) {
        return this.polygon.contains(coordinate);
      }
      return false;
    },
    createTextTip(position, text) {
      this.closeTextTip();
      let str = '<div class="map-shareorder-infowindow">' + text + '</div>';
      this.driveCarText = new AMap.Text({
        map: this.instance,
        bubble: false,
        text: str,
        position: position,
        textAlign: 'center',
        verticalAlign: 'middle',
        style: {
          border: '0px',
          background: 'transparent',
          height: '35px'
        },
        clickable: false,
        offset: new AMap.Pixel(0, -55)
      });
    },
    closeTextTip() {
      if (this.driveCarText) {
        this.instance.remove(this.driveCarText);
        this.driveCarText = null;
      }
    },
    addMarker(startPoint, origin, status) {
      // 添加一个起点marker对象
      if (this.instance) {
        let icon = new AMap.Icon({
          size: new AMap.Size(40, 48), // 图标尺寸
          image: require('@/assets/imgs/snyc_shangche_icon.png'),
          imageSize: new AMap.Size(20, 24) // 根据所设置的大小拉伸或压缩图片
        });
        let marker = new AMap.Marker({
          position: startPoint, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          offset: new AMap.Pixel(-10, -24),
          icon: icon,
          title: origin
        });
        this.instance.add(marker);
        // 地址文字标记
        let markertwo = new AMap.Marker({
          position: startPoint, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          offset: new AMap.Pixel(-40, 0),
          content: origin
        });
        this.instance.add(markertwo);
        if (status === '1') {
          // 上车点自定义信息窗体
          window.infoWindow = new AMap.InfoWindow({
            isCustom: true,
            content:
              '<div>' +
              '<p style="background-color: #fff;font-size:12px;color:#4A4A4A;width:90px;height:34px;line-height:34px;border-radius:40px;text-align:center;margin:0px auto">在这里上车</p>' +
              '</div>',
            offset: new AMap.Pixel(0, -28)
          });
          window.infoWindow.open(this.instance, startPoint);
        }
      }
    },
    // 同行乘客起点标记点
    addSameMarker(sameStartPosition) {
      // var icon = "";
      for (var i in sameStartPosition) {
        // icon = new AMap.Icon({
        //     size: new AMap.Size(50, 50), // 图标尺寸
        //     image: sameStartPosition[i].sameUsersUserHeadpath, // Icon的图像
        //     imageSize: new AMap.Size(25, 25) // 根据所设置的大小拉伸或压缩图片
        // });
        // let marker = new AMap.Marker({
        //     position: sameStartPosition[i].sameOriginCoord.split(','), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //     offset: new AMap.Pixel(-12.5, -25),
        //     content: '<div>' +
        //             '<p><img src=' + sameStartPosition[i].sameUsersUserHeadpath + ' style="width:25px;height:25px;border-radius:50%"></p>' +
        //             '</div>'
        // });
        let marker = new AMap.Marker({
          position: sameStartPosition[i].sameOriginCoord.split(','), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          offset: new AMap.Pixel(-12.5, -25),
          content:
            '<div>' +
            '<p style="width:80px;"><span style="width:10px;height:10px;border:solid 2px #3F88EB;background-color:#fff;display:inline-block;border-radius:50%;position:relative;top:2px;right:2px;"></span><span style="font-size:12px;color:#333">同行乘客</span></p>' +
            '</div>'
        });
        this.instance.add(marker);
      }
    },
    // 同行乘客终点标记点
    addEndSameMarker(sameDestPosition) {
      for (var i in sameDestPosition) {
        let marker = new AMap.Marker({
          position: sameDestPosition[i].sameDestCoord.split(','), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          offset: new AMap.Pixel(-12.5, -25),
          content:
            '<div>' +
            '<p style="width:80px;"><span style="width:10px;height:10px;border:solid 2px #FF6917;background-color:#fff;display:inline-block;border-radius:50%;position:relative;top:2px;right:2px;"></span><span style="font-size:12px;color:#333">同行乘客</span></p>' +
            '</div>'
        });
        this.instance.add(marker);
      }
    },
    addEndMarker(endPoint, destination) {
      // 添加一个终点marker对象
      if (this.instance) {
        let icon = new AMap.Icon({
          size: new AMap.Size(40, 48), // 图标尺寸
          image: require('@/assets/imgs/snyc_xiache_icon.png'),
          imageSize: new AMap.Size(20, 24) // 根据所设置的大小拉伸或压缩图片
        });
        let marker = new AMap.Marker({
          position: endPoint, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          offset: new AMap.Pixel(-10, -24),
          icon: icon
        });
        this.instance.add(marker);
        let markertwo = new AMap.Marker({
          position: endPoint, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          offset: new AMap.Pixel(-40, 0),
          content: destination
        });
        this.instance.add(markertwo);
      }
    },
    createRoute(startPoint, endPoint, type) {
      AMap.plugin('AMap.Driving', () => {
        // 异步加载插件
        // 构造路线导航类
        var driving = new AMap.Driving({
          map: this.instance,
          hideMarkers: true,
          showTraffic: false, // 设置是否显示实时路况信息默认设置为true
          autoFitView: true
        });
        if (type === '2') {
          this.instance.setFitView();
        } else {
          // 根据起终点经纬度规划导航路线
          driving.search(new AMap.LngLat(startPoint[0], startPoint[1]), new AMap.LngLat(endPoint[0], endPoint[1]), function(
            status,
            result
          ) {
            if (status === 'complete') {
              console.log('绘制路线完成');
            } else {
              console.log('获取数据失败：' + result);
            }
          });
        }
      });
    },
    // 获取定位
    watchLocation(onPosition, onFailed) {
      if (this.geolocation) {
        return;
      }
      AMap.plugin('AMap.Geolocation', () => {
        let icon = new AMap.Icon({
          size: new AMap.Size(36, 46), // 图标尺寸
          image: require('@/assets/imgs/dw_icon.png'),
          imageSize: new AMap.Size(18, 23) // 根据所设置的大小拉伸或压缩图片
        });
        this.geolocation = new AMap.Geolocation({
          enableHighAccuracy: true, // 是否使用高精度定位，默认:true
          timeout: 10000, // 超过10秒后停止定位，默认：无穷大
          maximumAge: 100, // 定位结果缓存0毫秒，默认：0
          convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
          showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
          showButton: false,
          markerOptions: {
            offset: new AMap.Pixel(-8, -12),
            icon: icon
          },
          showCircle: false, // 定位成功后用圆圈表示定位精度范围，默认：true
          panToLocation: false, // 定位成功后将定位到的位置作为地图中心点，默认：true
          zoomToAccuracy: false // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
        });
        this.instance.addControl(this.geolocation);
        this.geolocation.getCurrentPosition();
        this.timerOrder = setInterval(() => {
          this.geolocation.getCurrentPosition();
        }, 5000); // 每隔5秒获取定位位置
        AMap.event.addListener(this.geolocation, 'complete', data => {
          sessionStorage['formattedAddress'] = data.formattedAddress;
          var lat = data.position.lat;
          var lng = data.position.lng;
          var geolocationarr = [data.position.lng, data.position.lat];
          onPosition(geolocationarr);
        });
        AMap.event.addListener(this.geolocation, 'error', function() {
          onFailed(new Error('获取定位失败'));
        });
      });
    },
    updateCurrentPosition() {
      if (this.geolocation) {
        this.geolocation.getCurrentPosition();
      }
    },
    addPolyline(start, end) {
      let polyline = new AMap.Polyline({
        path: [start, end], // 设置线覆盖物路径
        strokeColor: '#11B120', // 线颜色
        strokeOpacity: 1, // 线透明度
        strokeWeight: 2, // 线宽
        strokeStyle: 'dashed', // 线样式
        strokeDasharray: [10, 5] // 补充线样式
      });
      this.instance.add(polyline);
      return polyline;
    },
    updatePolyline(line, start, end) {
      if (line) {
        line.setPath([start, end]);
      }
    },
    clearWatchLocation() {
      if (this.geolocation) {
        this.instance.removeControl(this.geolocation);
        this.geolocation = null;
      }
      clearInterval(this.timerOrder);
      this.timerOrder = null;
    },
    removePathNavigator() {
      if (this.driveCar) {
        this.driveCar.stopMove();
        this.instance.remove(this.driveCar);
        this.driveCar = null;
      }
      if (this.drivePath) {
        this.instance.remove(this.drivePath);
        this.drivePath = null;
      }
      if (this.driveCarText) {
        this.driveCarText.stopMove();
        this.instance.remove(this.driveCarText);
        this.driveCarText = null;
      }
    },
    createPathNavigator(start, dest, style) {
      return new Promise((resolve, reject) => {
        this.createDrivingRoute(start, dest)
          .then(result => {
            let timeLeftMin = result.time / 60;
            let timeLeftStr = timeLeftMin.toFixed(0) + '分钟';
            let mileLeftMeter = result.distance / 1000;
            let mileLeftStr = mileLeftMeter.toFixed(1) + '公里';
            this.driveCarInfo = {
              timeStr: timeLeftStr,
              mileStr: mileLeftStr
            };
            this.updateDrivePath(style);
            resolve(this.driveCarInfo);
          })
          .catch(reason => {
            reject(reason);
          });
      });
    },
    createPathInfo(start, dest) {
      return new Promise((resolve, reject) => {
        this.createDrivingRoute(start, dest)
          .then(result => {
            let timeLeftMin = result.time / 60;
            let timeLeftStr = timeLeftMin.toFixed(0) + '分钟';
            let mileLeftMeter = result.distance / 1000;
            let mileLeftStr = mileLeftMeter.toFixed(1) + '公里';
            this.driveCarInfo = {
              timeStr: timeLeftStr,
              mileStr: mileLeftStr
            };
            resolve(this.driveCarInfo);
          })
          .catch(reason => {
            reject(reason);
          });
      });
    },
    updateDriveCar(position, style) {
      if (this.driveCar) {
        this.driveCar.moveTo(position, MARKER_MOVE_SPEED);
      } else {
        this.driveCar = new AMap.Marker({
          map: this.instance,
          position: position,
          offset: new AMap.Pixel(-18, -9),
          angle: -90,
          autoRotation: true,
          icon: new AMap.Icon({
            size: new AMap.Size(72, 36), // 图标尺寸
            image: process.env.BASE_URL + 'static/imgs/car@2x.png',
            imageSize: new AMap.Size(36, 18) // 根据所设置的大小拉伸或压缩图片
          })
        });
      }
      let showText = true;
      let text = '';
      if (style && style === '1') {
        text = '<div class="map-shareorder-infowindow">司机预计' + this.driveCarInfo.timeStr + '后到达</div>';
      } else if (style && style === '2') {
        text = '<div class="map-shareorder-infowindow">司机正在接驾中</div>';
      } else if (style && style === '3') {
        text =
          '<div class="map-shareorder-infowindow">距终点<span style="color:#FF6917">' +
          this.driveCarInfo.mileStr +
          '</span> 预计行驶<span style="color:#FF6917">' +
          this.driveCarInfo.timeStr +
          '</span></div>';
      } else {
        showText = false;
      }
      if (!showText) {
        return;
      }
      if (this.driveCarText) {
        this.driveCarText.moveTo(position, MARKER_MOVE_SPEED);
      } else {
        this.driveCarText = new AMap.Text({
          map: this.instance,
          bubble: false,
          text: text,
          position: position,
          textAlign: 'center',
          verticalAlign: 'middle',
          style: {
            border: '0px',
            background: 'transparent',
            height: '35px'
          },
          clickable: false,
          offset: new AMap.Pixel(0, -30)
        });
      }
    },
    updateDrivePath(style) {
      let strokeColor = '#0AA436';
      if (style && style === '0') {
        strokeColor = '#BFBFBF';
      }
      if (this.drivePath) {
        this.drivePath.setPath(this.currentRoutes);
      } else {
        this.drivePath = new AMap.Polyline({
          map: this.instance,
          path: this.currentRoutes,
          strokeWeight: 5,
          strokeColor: strokeColor
        });
      }
    },
    createDrivingRoute(start, dest) {
      return new Promise((resolve, reject) => {
        if (this.instance) {
          AMap.plugin('AMap.Driving', () => {
            let result = null;
            let driving = new AMap.Driving({
              // map: this.mapInstance,
              hideMarkers: true,
              autoFitView: false,
              showTraffic: false,
              isOutline: false,
              policy: AMap.DrivingPolicy.REAL_TRAFFIC
            });
            driving.search(start, dest, (status, data) => {
              if (data.routes) {
                if (data.routes.length > 0) {
                  this.currentRoutes = [];
                  result = data.routes[0];
                  result.steps.forEach(item => {
                    item.path.forEach(item => {
                      this.currentRoutes.push(item);
                    });
                  });
                  resolve(result);
                } else {
                  reject(new Error('线路规划失败' + data));
                }
              } else {
                reject(new Error('线路规划失败' + data));
              }
            });
          });
        } else {
          reject(new Error('地图还没有初始化，无法使用实时导航功能'));
        }
      });
    },
    createAdsorptionFence(fences) {
      this.clearAdsorptionFence();
      if (typeof fences === 'string') {
        this.adsorptionFenceInfo = fences.split(';');
        this.adsorptionFenceInfo.forEach((value, index) => {
          this.adsorptionFenceInfo[index] = value.split(',');
        });
      } else if (fences instanceof Array) {
        this.adsorptionFenceInfo = fences;
      }
      if (this.adsorptionFenceInfo.length > 1) {
        this.adsorptionFence = new AMap.Polygon({
          // 绘制围栏
          map: this.instance,
          path: this.adsorptionFenceInfo,
          strokeColor: '#FF6917',
          strokeOpacity: 1,
          strokeWeight: 2,
          fillColor: '#FF6917',
          fillOpacity: 0.0
        });
        this.instance.add(this.adsorptionFence);
      }
    },
    createAdsorptionMarkers(coords, stationId) {
      this.clearAdsorptionMarkers();
      this.adsorptionStationId = stationId;
      if (coords instanceof Array) {
        coords.forEach((value, index) => {
          const coord = value.lnglat.split(',');
          this.createAdsorptionMarker(coord, value.shortName);
          if (value.isTarget === '1') {
            this.adsorptionPoint = value;
            this.instance.panTo(coord);
            this.adsorptionPanFlag = true;
          }
        });
      }
    },
    createAdsorptionMarker(coord, text) {
      const marker = new AMap.CircleMarker({
        map: this.instance,
        center: coord,
        radius: 4,
        fillColor: '#FF6917',
        strokeOpacity: 0
      });
      const markerText = new AMap.Text({
        position: coord,
        map: this.instance,
        text: '<div class="map-location-name">' + text + '</div>',
        style: {
          border: '0px',
          background: 'transparent',
          height: '35px'
        },
        offset: new AMap.Pixel(0, 20)
      });
      this.adsorptionMarkers.push({
        marker: marker,
        text: markerText
      });
    },
    clearAdsorptionFence() {
      if (this.adsorptionFence != null) {
        this.instance.remove(this.adsorptionFence);
        this.adsorptionFence = null;
      }
    },
    clearAdsorptionMarkers() {
      if (this.adsorptionMarkers.length > 0) {
        this.adsorptionMarkers.forEach((item, index) => {
          this.instance.remove(item.marker);
          this.instance.remove(item.text);
          this.adsorptionMarkers[index] = undefined;
        });
        this.adsorptionMarkers = [];
      }
    },
    clearAdsorption() {
      this.clearAdsorptionFence();
      this.clearAdsorptionMarkers();
      this.adsorptionPoint = null;
      this.adsorptionPanFlag = false;
    }
  },
  computed: {
    ...mapGetters(['pinStartMapCenter', 'pinEndMapCenter', 'baoStartMapCenter', 'baoEndMapCenter'])
  }
};
</script>

<style lang="stylus">
#mapContainer {
  width: 100vw;
  height: 100vh;

  #amap {
    width: 100%;
    height: 100%;
  }
}

.map-station-label {
  color: #333;
  max-width: 6em;
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

defaultStationMarker() {
  position: relative;
  border-radius: 10px;
  padding: 5px 10px;
  box-shadow: 0 2px 6px 0 #999;
}

.station-marker-normal {
  defaultStationMarker();
  background-color: #FFF;
  color: #333;
}

.station-marker-normal:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #FFF;
  border-bottom: 0;
  margin-left: -15px;
  margin-bottom: -15px;
}

.station-marker-selected {
  defaultStationMarker();
  background-color: #FF6917;
  color: #FFF;
}

.station-marker-selected:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #FF6917;
  border-bottom: 0;
  margin-left: -15px;
  margin-bottom: -15px;
}

.map-shareorder-infowindow {
  position: relative;
  border-radius: 10px;
  padding: 10px 15px;
  box-shadow: 0 2px 6px 0 #999;
  border-radius: 40px;
  background-color: #fff;
  font-size: 24px;
  color: #4A4A4A;
  text-align: center;
  white-space: nowrap;
}

.map-shareorder-infowindow:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  margin-left: -10px;
  margin-bottom: -10px;
}
</style>
